<template>
    <div>


        <div style="text-align: right;">
            <el-button type="danger" @click="updateArticle">编辑文章</el-button>
            <!--            <el-button v-show="toobarVS" type="danger" @click="updateArticle">保存</el-button>-->
            <el-button type="primary" @click="backHome">返回</el-button>
        </div>
        <div class="edit">
            <div class="Title">{{title}}</div>
            <el-divider></el-divider>
            <div v-show="toobarVS" ref="toolbar" class="toolbar"></div>
            <div ref="text" class="detailArticle">

            </div>
        </div>

    </div>

</template>

<script>
    import E from "wangeditor";

    export default {
        name: "Article",
        data() {
            return {
                toobarVS: false,
                title: "",
                editor: null,

            }
        },
        created() {
            if (sessionStorage.getItem("store")) {
                this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
            }
            window.addEventListener("beforeunload", () => {
                sessionStorage.setItem("store", JSON.stringify(this.$store.state))
            })
        },
        computed: {
            articleId() {
                return this.$store.state.ArticleId
            }

        }
        ,
        mounted() {
            this.editor = new E(this.$refs.toolbar, this.$refs.text);

            this.editor.create();

            this.$nextTick(() => {
                this.getDetailArticle();
                this.editor.$textElem.attr('contenteditable', false)

            })

        },
        methods: {
            getDetailArticle() {
                this.$API.getArticleById({"id": this.articleId}).then(
                    res => {
                        debugger
                        let content = res.data["data"][0]["content"]
                        this.title = res.data["data"][0]["title"]
                        let imgurl = res.data["data"][0]["img"]
                        this.articleId=res.data["data"][0]["id"]
                        this.editor.txt.html(content)
                        this.$store.dispatch("changeDetailArticle", content)
                        this.$store.dispatch('changeHeaderBgState', imgurl)


                    }
                )
            },
            updateArticle() {

                // this.$store.dispatch('changeHeaderBgState', null)
                window.sessionStorage.removeItem("store")
                this.$router.push({ name: 'Write', params: { articleId: this.articleId }})

            },

            backHome() {
                this.$store.dispatch('changeHeaderBgState', null)
                window.sessionStorage.removeItem("store")

                this.$router.push("/HomePage")

            }


        }

    }
</script>

<style lang="scss" scoped>


    .edit {
        background-color: white;
        padding: 2rem;


        .Title {
            font-size: 3rem;
            font-family: Microsoft YaHei;
            font-weight: 100;
            font-weight: bolder;
        }
        .detailArticle {
            text-align: initial;
            overflow: hidden;
            min-height: 1080px;



        }
        /deep/ .w-e-text {
            padding: 0 10px;
            overflow-y: auto;
        }

    }


</style>
